<template>
    <div class="artist">
      <ul class="select" v-for="item in category" :key="item.key">
        <li>{{ item.name }}</li>
        <li
          v-for="cat in item.child"
          :key="cat.key"
          :class="params[item.key] == cat.key ? 'active' : ''"
          @click="optionChange(cat.key,item.key )"
        >
          {{ cat.name }}
        </li>
      </ul>
    </div>
    <ul class="list">
      <SingerCardList :singerList="singerList" />
    </ul>
   
    <div class="button">
      <el-button
        link
        type="primary"
        class="text-center w-full"
        @click="loadMore"
        :loading="loading"
        >加载更多</el-button
      >
    </div>
  </template>
  
<script setup lang="ts">
  import { onMounted, reactive, ref } from "vue";
  import { getAllSinger } from "@/api";
  import { SingerCategory } from "@/api/types";
  import SingerCardList from "@/components/common/SingerCardList.vue";
  
  const singerList = ref([]);
  const category = SingerCategory;
  
  const loading = ref(false);
  const params = reactive({
    type: -1,
    area: -1,
    initial: "-1",
    page: 1,
    offset: 1,
    limit: 30,
  });
  
  const getData = async () => {
    loading.value = true;
    try {
      const data = await getAllSinger();
      // if (params.page === 1) {
      //   singerList.value = data;
      // } else {
      //   singerList.value.push(...data);
      // }
      singerList.value = data;
      loading.value = false;
    } catch (e) {
      params.page--;
    }
  };
  
  const optionChange = (key: number | string, option: string) => {
    // console.log(key, option);
    if (option == "area") params.area = key as number;
    if (option == "type") params.type = key as number;
  
    //getData();
  };
  
  const loadMore = () => {
    params.page++;
    params.offset =(params.page - 1) * 30;
    //getData();
  };
  
  onMounted(() => {
    getData();
  });
  </script>
  
  <style lang="scss" scoped>
  .button {
    text-align: center;
  }
  ul.select {
    list-style-type: none;
    display: flex;
    margin: 10px 0;
  li:first-child {
    font-weight: bold;
    margin-right: 10px;
  }
  li:not(li:first-child) {
    padding: 0 6px;
    margin: 0 3px;
    cursor: pointer;
  }
  li:hover:not(.active, li:first-child) {
    color: #2874df;
  }
  .active {
    border-radius: 3px;
    background-color: #2874df;
    color: #fff;
  }
}
.list {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 100%;
}
</style>
  